<template name="btabbar">
    <view style="width: 100%;">
        
        <view class="tab">
            <view  :class="{'active':active==0}" class="item" @tap="swiperChange(0,'/pages/index/index')">         
					<view v-if="active==0">
					    <view class="iconfont">&#xe68f;</view>
					</view>
					<view v-else>
					    <view class="iconfont">&#xe67b;</view>
					</view>
					<view class="bottom-txt">首页</view>			
            </view>
			<!-- <view :class="{'active':active==1}" class="item" @tap="swiperChange(1,'/packageAfterSale/pages/after_sales/product/product_home')">
			   
					<view>
						<view class="iconfont">&#xe6af;</view>
					</view>
					<view class="bottom-txt"> 产品百科 </view>
				
			</view> -->
			<view :class="{'active':active==1}" class="item" @tap="swiperChange(1,'/packageUser/pages/message/message')">
			   
					<view>
						<view class="iconfont">&#xe6f2;</view>
					</view>
					<view class="bottom-txt">消息中心</view>
				
			</view>
			
            <view class="camera item">
				<view v-if="active==0">
				<tui-bubble-popup direction="bottom" position="absolute" top="-92rpx" :mask="false" :show="show"  triangleBottom="-24rpx"
				 backgroundColor="rgba(0, 0, 0, 0.4)" triangleLeft="128rpx" left="-64rpx">
					<view class="tui-chat-text" style="padding: 10rpx;font-size: 28rpx;" @click="closeBubble">点击扫码租赁或绑定</view>
				</tui-bubble-popup>
				</view>
				
					<view class="circle">
						<button v-if="tel==''" hover-class="none" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"  @tap="cameraTab">
							<view class="circle-in">
								<view class="iconfont cameraicon">&#xe6a5;</view>
							</view>
						</button>
						<button v-else hover-class="none"  @tap="cameraTab">
							<view class="circle-in">
								<view class="iconfont cameraicon">&#xe6a5;</view>
							</view>
						</button>
					</view>			
            </view>
			<view :class="{'active':active==3}" class="item" @tap="swiperChange(3,'/packageOrder/pages/order_list_center')" >		  
					<view>
						<view class="iconfont">&#xe6ae;</view>
					</view>
					<view class="bottom-txt">订单</view>
			</view>
            <view :class="{'active':active==4}"  class="item" @tap="swiperChange(4,'/pages/user/user')" >         				
					<view>
					    <view class="iconfont">&#xe6ad;</view>
					</view>
					<view class="bottom-txt">我的</view>		
				      
            </view>

        </view>
		<!-- 登录弹框 -->
		<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom"/>
		<!-- 提示弹框 -->
		<tui-tips ref="toast"></tui-tips>
		<!-- 登录弹框 -->
		<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom"/>
		<!-- 打开手动设置询问弹框 -->
		<tui-modal :show="modal" @click="modalClick" @cancel="modalHide" content="若需要使用此功能,请在设置中允许定位!" color="#333" :size="32" :button="modalButton" shape="circle"></tui-modal>
    </view>
</template>
<script>
//#ifdef  H5
	
	let jweixin = require('jweixin-module')
//#endif
// ios底部返回键适配器
	import tuiBottomPopup from "@/components/bottom-popup/bottom-popup"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
import bubblePopup from '@/components/tui-bubble-popup/tui-bubble-popup.vue'
import uniPopupvLogin from '@/components/uni-popup/uni-popup-vlogin.vue'
// 弹框
import tuiModal from "@/components/modal/modal"
import store from '@/store/index.js';
import refer from '@/utils/refer.js'
import {mapGetters} from 'vuex'
export default {
    name: "btabbar",
	data () {
        return {
            active:0,
            height:0,
			show: false,
			//确认弹框
			modalButton: [{
				text: "取消",
				type: 'gray'
			}, {
				text: "前往"
			}],
			modal:false,
			modalType:''
        }
    },
	computed: {
			//手机号
			...mapGetters(['tel'])	
		},
	components:{
		uniPopup,
		bubblePopup,
		tuiBottomPopup,
		tuiModal,
		uniPopupvLogin
	},
    methods:{
		// 授权弹框触发事件
		modalClick(e){
			const _this = this
			let index = e.index;
			if (index === 0) {
				_this.modalHide()
				return
			} 
			// 用户点击确定按钮
			uni.openSetting({
			// 确认后打开设置页面
			    success(res) {
			        if(res.authSetting['scope.userLocation']){
			            console.log("手动授权成功")
						if(_this.modalType=='Rental'){
							_this.swiperChange(3,'/pages/store/nearby/rent')
						}
						if(_this.modalType=='saoma'){
							_this.$emit('camera')
						}
						console.log("跳转")
			        }else{
			            console.log("手动授权失败")
						let options = {
							msg:'未手动授权',
							type:'danger'
						  };								
						_this.$refs.toast.showTips(options);
			        }
					_this.modalHide()
			    },
			    fail(){
			        console.log("打开设置页面失败")
					let options = {
						msg:'打开设置页面失败',
						type:'danger'
					  };								
					_this.$refs.toast.showTips(options);
					_this.modalHide()
			    }
			})
		},
		getPhoneNumber: function(e){
			// console.log(e.detail.errMsg)
			// console.log(e)
			// console.log(e.detail.encryptedData)
			const _this = this
			if(!store.getters.loginStatus)
			{
				refer.setVilit('local')
				let callback = function(url){		
				   _this.$refs.popupvLogin.open()			   
				}
			
				refer.toUrl(callback,{},'local')
				return
			}
			if(store.getters.tel!='')
			{
				return
			}
			
			 if (e.detail.errMsg != 'getPhoneNumber:ok')
			 {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '请先授权',
						success: function (res) {
							console.log(res)
						}
					})
				return	
			} 
			
		
				
				uni.login({
				  provider:'weixin',
				  //#ifdef  MP-ALIPAY
					scopes:'auth_base',
				  // #endif
				  success: function (loginRes) {
					  let code = loginRes.code
					  
					  const encryptedData = e.detail.encryptedData;
					  				const iv = e.detail.iv;
					  				         
					  				 //提交ajax
					  				var opt={
					  					url:'/user/getMobile',
					  					data:{
					  						encryptedData:encryptedData,
					  						iv:iv,
											code:code
					  					},
					  					success:function(res){
					  						
					  						if(res.status==1){
					  							//_this.data.goods = res.data.list
					  							//console.log(_this.data.goods)
					  							//更新本地数据				
					  							//Vue.set(_this.data.userInfo, 'mobile', res.data.mobile)
												store.dispatch('setTel',res.data.mobile)
					  							let options = {
					  								msg:'手机绑定成功',
					  								type:'green'
					  							 };
					  							_this.$refs.toast.showTips(options);
					  						 }
					  					
					  						else{
					  							  let options = {
					  								msg: res.message,
					  								type:'danger'
					  							  };								
					  							_this.$refs.toast.showTips(options);
					  						
					  						}
					  													
					  					}
					  				};
								_this.$service.GetApi(opt) 
					  
				  },
				  })
		
			         
			
			
		},
		// 关闭再次授权弹框
		modalHide(){
			this.modal = false
		},
		// 打开再次授权弹框
		modalShow(type) {
			this.modal = true
			this.modalType = type
		},
		// 气泡开关
		closeBubble() {
			this.show = !this.show;
		},
        swiperChange(active,rurl) {
			console.log('底部触发-------')
			const _this = this
			uni.setStorageSync('commonBottomActive',active);
           if(active==this.active){
			   console.log('当前页面不触发-------',active)
           		return false;
           }
		   
		   let referType = 'reLaunch'
		   if(active==2)
		   {	
				referType = 'navigateTo'
		   }
			console.log('底部触发跳转路径----',rurl)
			// uni.redirectTo({
			// 		url: rurl
			// })
			this.$refer.setVilit(rurl)
			let callback = function(url){
				
				_this.$refs.popupvLogin.open()
			}
			this.$refer.toUrl(callback,{url:rurl},referType)
		 
        },
		cameraTab(){
			const _this = this
			//#ifdef  MP-WEIXIN || MP-ALIPAY ||APP-PLUS
				if(store.getters.tel=='')
				{
					return
				}
			
				uni.getLocation({
					//#ifdef  MP-WEIXIN ||APP-PLUS
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					//#endif
					success: function (res) {
						_this.$emit('camera')
					},
					fail:function(res){//失败写这里
						console.log('失败')
						_this.modalShow('saoma')
					}
				})
				return false;
			//#endif
		}
		
    },
    mounted:function(){
		// 定时器
			setTimeout(this.closeBubble, 1000);
			
        uni.getSystemInfo({
            success:res=>{
				//console.log(res)
                this.height = res.screenHeight;
				//console.log(this.height)
				//console.log()
            }
        })
		
		if(uni.getStorageSync('commonBottomActive')!==''){
			this.active = uni.getStorageSync('commonBottomActive');
			
		}
		uni.setStorageSync('commonBottomActive','');	
    }
}
</script>
<style>
	@import "../../common/css/uni.css";
	.bottom-txt{font-size:20rpx;}
	button {
		background-color:transparent;	
		overflow:inherit;
	}
	button::after{
		border-style:none none none none;
	}
	
    .swiper-item {
        width: 100%;
        height: 100%;
		
    }

    .tab {
        position: fixed;
        z-index:98;
        height: 108upx;
        width: 100%;
        bottom: 0;
        background-color: #fff;
        display: flex;
       /* border-top: #ededed 1px solid; */
	   padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	   padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
    }
    .uni-icon {
        font-size: 48upx;
    }

    .tab .item-add {
        width: 30%;
        color: #fff;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        position: relative;
        text-align: center;
		margin-top: -40upx;
		background: #be2120;
		border-radius: 50%;
		margin-bottom: 10upx;
		/* box-shadow: 0 5px 20px rgba(0,0,0,.3) */
    }

    .item-add .uni-icon {
        position: absolute;
        color: #fff;
        border-radius: 50%;
        font-size: 116upx;
        left: 50%;
        margin-left: -58upx;
        top: -50%;
    }

    .item-add .text {
        font-size: 30upx;
        /* padding-top: 50upx; */
    }

    .tab .item {
        width: 33%;
        color: #5D626F;
        font-size: 30upx;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
		text-align: center;
    }
	.iconfont{
		font-size:40rpx;
	}
    .active{
        color: #69a4fe !important;
    }

    .active .uni-icon {
        color: #fff;
    }
	.camera{
		/* background-color: #7569fe; */
		position: relative;
	}
	.camera .circle{
		position: absolute;
		top: -23.190000000000005rpx;
		left: 50%;
		width: 110rpx;
		height: 110rpx;
		-webkit-border-radius: 100%;
		border-radius: 100%;
		background-color: #ffffff;
		
		box-shadow: 0px -2rpx 2rpx #FFFFFF;
		
		display: flex;
		
		justify-content: center;
		
		align-items: center;
		margin-left: -55rpx;

		
	}
	.camera .circle .circle-in{
		background-color: #69a4fe;
		width:100rpx;
		height:100rpx;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cameraicon{
		font-size:72rpx;
		color: #FFFFFF
	}
</style>